<template>
  <div class="app-container">
    <div class="content-main">
      <div v-loading="loading" class="form-table-box">
        <el-form ref="infoForm" :rules="infoRules" :model="infoForm" label-width="120px">
          <el-form-item label="内容名称" prop="contentName">
            <el-input v-model="infoForm.contentName" />
          </el-form-item>
          <el-form-item label="内容详情" prop="contentPage">
            <vue-ueditor-wrap v-model="infoForm.contentPage" :config="ueditorConfig.config" @ready="ueditorConfig.ready" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmitInfo">提交</el-button>
            <el-button @click="goBack">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import {
  createContent
} from '@/api/content/index'
import ueditorConfig from '@/config/ueditorConfig'
export default {
  data() {
    return {
      loading: false,
      infoForm: {
        contentName: '',
        contentPage: ''
      },
	  ueditorConfig: ueditorConfig,
      infoRules: {
        contentName: [{
          required: true,
          message: '请输入内容名称',
          trigger: 'blur'
        }],
        contentPage: [{
          required: true,
          message: '请输入内容详情',
          trigger: 'change'
        }]
      }
    }
  },
  methods: {
    goBack() {
      this.$router.go(-1)
    },
    onSubmitInfo() {
      const that = this
      that.$refs['infoForm'].validate(valid => {
        if (valid) {
          that.loading = true
          createContent(that.infoForm)
            .then(res => {
              that.$message({
                type: 'success',
                message: '保存成功'
              })
              that.loading = false
              that.$router.push({
                name: 'contentList'
              })
            })
            .catch(() => {
              that.loading = false
            })
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style>
	.image-uploader {
		height: 105px;
	}

	.image-uploader .el-upload {
		border: 1px solid #d9d9d9;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}

	.image-uploader .el-upload:hover {
		border-color: #20a0ff;
	}

	.image-uploader .image-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 187px;
		height: 105px;
		line-height: 105px;
		text-align: center;
	}

	.image-uploader .image-show {
		width: 187px;
		height: 105px;
		display: block;
	}

	.image-uploader.new-image-uploader {
		font-size: 28px;
		color: #8c939d;
		width: 165px;
		height: 105px;
		line-height: 105px;
		text-align: center;
	}

	.image-uploader.new-image-uploader .image-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 165px;
		height: 105px;
		line-height: 105px;
		text-align: center;
	}

	.image-uploader.new-image-uploader .image-show {
		width: 165px;
		height: 105px;
		display: block;
	}

	.courseList {
		border: 1px solid #dadada;
		padding: 20px;
	}

	.couseInput {
		width: 100px;
	}

	.courseItem {
		display: flex;
		margin-bottom: 20px;
	}

	.courseItem span {
		padding-left: 4px;
	}

	.addBtn {
		display: flex;
		justify-content: center;
	}

	.delTxtBtn,
	.delTxtBtn:hover,
	.delTxtBtn:active {
		color: #f56c6c;
	}
</style>
